<template>
  <!--验证码登陆-->
  <div class="box">
    <div class="container">
      <br /><br />
      <img @click="prev" src="../img/login/取消.png" alt="" />
    </div>
    <div class="input-big-box">
      <img src="../img/login/logo.png" alt="" />
      <h1>自律与坚持</h1>
      <van-cell plain type="info" @touchstart.native.stop="show = true">
        +86<input
          type="text"
          ref="inputVal"
          @blur="test"
          onfocus="onfocus"
          placeholder="输入手机号"
        />
      </van-cell>
      <van-number-keyboard
        :show="show"
        title="键盘标题"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
      />
      <input type="text" placeholder="输入验证码" />
      <p>获取验证码</p>
      <input type="checkbox" />我已阅读并同意《注册协议》和《隐私政策》
      <button>登陆</button>
      <p @click="toMima">账号密码登陆</p>
      <br /><br /><br /><br />
      <span>其他登录方式</span>
      <br /><br /><br />
      <img src="../img/login/微信.png" alt="" />
      <img src="../img/login/QQ.png" alt="" />
      <img src="../img/login/苹果.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: "",
    };
  },
  methods: {
    test() {
      this.$refs.inputVal.blur();
    },
    prev() {
      this.$router.go(-1);
    },
    toMima() {
      this.$router.push("/mima");
    },
  },
};
</script>


<style scoped>
.input-big-box {
  text-align: center;
  width: 1624;
  height: 750px;
}
.container img {
  width: 22px;
  height: 22px;
  margin-left: 35px;
}
.input-big-box img {
  width: 98px;
  height: 98px;
  margin-top: 35px;
  margin: 0 45px;
}
input {
  margin: 0 auto;
}
h1 {
  margin-bottom: 80px;
}
button {
  width: 512px;
  height: 80px;
  background: #24b92e;
  margin-top: 10px;
  border-radius: 40px;
  font-size: 34px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
p {
  height: 23px;
  font-size: 24px;
  margin-top: 22px;
  margin-bottom: 100px;
  text-align: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: #0ea918;
}
span {
  width: 142px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-bottom: 200px;
}
.van-cell__value--alone {
  color: #323233;
  text-align: center;
}
</style>